<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <el-input v-model="searchTerms.searchValue" placeholder="用户名, 订单号, 商品名称" class="search-input" @change="getData" />
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
        </div>
        <column-controller :check-items="th" style="float:right;" @change="columnCheck" />
      </div>
      <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row @sort-change="handleSortChange">
        <el-table-column v-if="th[0].check" prop="id" label="ID" min-width="65" header-align="center" align="center" sortable />
        <el-table-column v-if="th[1].check" prop="title" label="商品名称" min-width="250" header-align="center" align="center" />
        <el-table-column label="商品规格" min-width="150" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row['goods_version'] || '--' }}
          </template>
        </el-table-column>
        <el-table-column v-if="th[2].check" prop="order_sn" label="订单号" min-width="150" header-align="center" align="center" />
        <el-table-column v-if="th[3].check" prop="type" label="商品类型" min-width="110" header-align="center" align="center">
          <template slot-scope="scope">
            <label v-if="!scope.row['typeTxt']">{{ scope.row.type===0?'小程序':scope.row.type===1?'腾讯云':'定制开发' }}</label>
            <label v-if="scope.row['typeTxt']">{{ scope.row['typeTxt'] }}</label>
          </template>
        </el-table-column>
        <el-table-column v-if="th[4].check" prop="uname" label="购买用户" min-width="130" header-align="center" align="center" />
        <el-table-column prop="name" label="业务员" min-width="130" header-align="center" align="center" />
        <el-table-column v-if="th[5].check" label="单价数量" min-width="140" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.price+'元/'+(scope.row.long===0?'永久':scope.row.long===1?'年':scope.row.long===2?'月':'日')+'×'+scope.row.amount }}
          </template>
        </el-table-column>
        <el-table-column v-if="th[6].check" prop="total_price" label="总价" min-width="110" header-align="center" align="center" sortable>
          <template slot-scope="scope">
            <el-tag type="primary">{{ scope.row.total_price }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="th[7].check" prop="pay_time" label="交易时间" min-width="160" header-align="center" align="center" >
          <template slot-scope="scope">
            {{ scope.row.pay_time?parseTime(scope.row.pay_time, '{y}-{m}-{d} {h}:{i}:{s}'):'--' }}
          </template>
        </el-table-column>
        <el-table-column v-if="th[8].check" prop="submitter" label="提交人" min-width="130" header-align="center" align="center" />
        <el-table-column v-if="th[8].check" prop="remarks" label="备注内容" min-width="200" header-align="center" align="center" />
        <el-table-column v-if="th[9].check" prop="pay_status" label="支付状态" min-width="100" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            {{ scope.row.pay_status===-3?'拒绝退款':scope.row.pay_status===-2?'已退款':
            scope.row.pay_status===-1?'申请退款':scope.row.pay_status===0?'待付款':scope.row.pay_status===1?'已付款': '已完成' }}
          </template>
        </el-table-column>
        <el-table-column v-if="th[10].check" prop="status" label="订单状态" min-width="100" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            {{ scope.row.status===-2?'已取消':scope.row.status===-1?'退款中':
            scope.row.status===1?'已完成':(scope.row.status===0&&scope.row.pay_status===0)?'待付款': '待处理' }}
          </template>
        </el-table-column>
        <el-table-column v-if="th[11].check" label="操作" min-width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="(scope.row.status === 0 && scope.row.pay_status === 1)" type="success" size="mini" class="bg-green" round @click="confirmOrder(scope.row, 'confirm')">完成订单</el-button>
            <el-button v-if="(scope.row.status === 0 && scope.row.pay_status === 0)" type="danger" size="mini" round @click="confirmOrder(scope.row, 'cancel')">取消订单</el-button>
            <el-button v-if="(scope.row.status === 0 && scope.row.pay_status === -1)" type="success" size="mini" class="bg-green" round @click="confirmOrder(scope.row, 'refund')">同意</el-button>
            <el-button v-if="(scope.row.status === 0 && scope.row.pay_status === -1)" type="danger" size="mini" round @click="confirmOrder(scope.row, 'refuse')">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>
  </div>
</template>

<script>
import { ColumnController } from '../components'
import { handleSortChange, handleSizeChange, handleCurrentChange, columnCheck, parseTime } from '@/utils/table'

export default {
  components: { ColumnController },
  data() {
    return {
      searchTerms: {
        searchValue: ''
      },

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 280,
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0,
      tableData: [],
      th: [{ name: 'ID', check: true },
        { name: '商品名称', check: true },
        { name: '订单号', check: true },
        { name: '商品类型', check: true },
        { name: '购买用户', check: true },
        { name: '单价数量', check: true },
        { name: '总价', check: true },
        { name: '交易时间', check: true },
        { name: '提交人', check: true },
        { name: '支付状态', check: true },
        { name: '订单状态', check: true },
        { name: '操作', check: true }]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, columnCheck, parseTime,
    /**
     * 对应接口用户列表("customer/list"),
     * token  用户凭证  (必填)
     * page_no   当前页码
     * page_size   每页数量
     * sortName  排序字段名
     * sortOrder   排序方式
     * search  关键词
     * start_time  注册开始时间
     * end_time  注册结束时间
     * min_balance  最小余额
     * max_balance  最大余额
     * level  客户等级
     * status  客户状态
     * return: {
     *     "id":162,
     *     "name":"111",
     *     "realname":"李古奇",
     *     "type":1,
     *     "mobile":"16655160908",
     *     "recommend":23,
     *     "addperson":"彭梓龙",
     *     "email":"Myp1397217046@163.com",
     *     "position":"0",
     *     "company":"0",
     *     "wechat":"paris1069g",
     *     ""qq":"",
     *     ""contact_next_time":null,
     *     ""source":"腾讯云体验",
     *     ""project":"null",
     *     ""progress":"成单签约",
     *     ""status":0,
     *     ""remarks":"李总已购买分销1680",
     *     ""cust_state":0,
     *     ""created_at":"0000-00-00 00:00:00",
     *     ""updated_at":null,
     *     ""admin_name":"彭梓龙"
     * }
     * */
    getData(order) {
      this.tableLoading = true
      order || (order = {})
      const url = 'order/list'
      const data = {
        page_no: this.currentPage,
        page_size: this.pageSize,
        search: this.searchTerms.searchValue
      }
      order.sortName && (data.sortName = order.sortName)
      order.sortOrder && (data.sortOrder = order.sortOrder)
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    confirmOrder(row, action) {
      this.$confirm((action === 'cancel' ? '取消' : (action === 'refuse' ? '拒绝退款' : (action === 'refund' ? '同意退款' : '完成'))) + '该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'order/ajax/' + row.id
        const data = { action: action }
        this.$store.dispatch('GetConnect', { url, data }).then(() => {
          this.getData()
          this.$message.success('操作成功')
        }).catch(e => {
          this.$message.error('操作失败,请刷新或联系管理员')
        })
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.box-1 {
  .header {
    @include flex-row(center, space-between);
    padding-bottom: 15px;
    div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
      .search-input {
        width: 240px;
      }
    }
  }
}
</style>

